<template>
  <h1>循环指令</h1>
    <ul>
      <li v-for="item in 5" >{{item}}</li>
    </ul>
    <ul>
      <li v-for="i in productArray" >{{i.name}} --- {{i.price}}</li>
    </ul>
    <table border="1">
      <tr>
        <th>产品编号</th>
        <th>产品名称</th>
        <th>产品价格</th>
      </tr>
      <tr v-for="(i,index) in productArray" >
        <td>{{index+1}}</td>
        <td>{{i.name}}</td>
        <td>{{i.price}}</td>
      </tr>
    </table>
</template>
<script setup>
  import {ref} from "vue";


  const productArray = ref([
    {
      name: 'product1',
      price: 100
    },
    {
      name: 'product2',
      price: 200
    },
    {
      name: 'product3',
      price: 300
    }
  ])
  //定义商品处理的方法
  const del = (index) => {
    if (confirm('你确定要删除吗？'))
    {productArray.value.splice(index,1)
  }
  }
</script>


<style scoped>
table{
  border-collapse: collapse;

}
</style>